<script setup>
// 表格数据
const tableData = Array(10).fill(0).map((_, idx) => {
    return {
        date: '2023-11-26',
        name: 'User' + idx,
        address: '中国'
    }
})

// 编辑行
const handleEdit = row => {
    console.log('编辑', row)
}

// 删除行
const handleDel = row => {
    console.log('删除', row)
}

</script>

<template>
    <h1 text-center py-10 text-blue-500>简单表格</h1>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="名字" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button link type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>